<template>
    <div>
        <el-button class="add_resume" type="primary" @click="dialogFormVisible = true">+新增简历</el-button>

        <el-dialog title="新增简历" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="期待岗位" prop="expectionJob">
                    <el-input v-model="form.expectionJob" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="教育背景" prop="educationBackground">
                    <el-input v-model="form.educationBackground" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目经历" prop="project">
                    <el-input v-model="form.project" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="专业技能" prop="skills">
                    <el-input v-model="form.skills" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="自我评价" prop="selfEvaluation">
                    <el-input v-model="form.selfEvaluation" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAddition">确 定</el-button>
            </div>
        </el-dialog>
        <div class="FirstLine">
            <div class="ResumeID" id="Title">
                简历编号
            </div>
            <div class="ExpectedJob">
                期待岗位
            </div>

        </div>

        <div v-for="item in Resume" :key="item.resumeId" class="Resume-item" @click="gotoResumeInfo(item.resumeId)">
            <el-button icon="el-icon-delete" class="delete_button" @click.stop="deleteResume(item.resumeId)"></el-button>
            <div class="ResumeID">{{ item.resumeId }}</div>
            <div class="ExpectedJob">{{ item.expectionJob }}</div>
        </div>
    </div>
</template>
<script>
import axios from 'D:\\job_management\\src\\axiosConfig.js'
export default {
    data() {
        return {
            Resume: [
                {
                    resumeId: 1,
                    expectionJob: '软件工程'
                },
                {
                    resumeId: 2,
                    expectionJob: 'java程序员'
                }
            ],
            dialogFormVisible: false,
            form: {
                expectionJob: '',
                educationBackground: '',
                project: '',
                skills: '',
                selfEvaluation: ''
            },
            rules: {
                expectionJob: [
                    { required: true, message: '请输入期待岗位', trigger: 'blur' },
                ],
                educationBackground: [
                    { required: true, message: '请输入教育背景', trigger: 'blur' },
                ],
                project: [
                    { required: true, message: '请输入项目经历', trigger: 'blur' },
                ],
                skills: [
                    { required: true, message: '请输入专业技能', trigger: 'blur' },
                ],
                selfEvaluation: [
                    { required: true, message: '请输入自我评价', trigger: 'blur' },
                ],
            }
        }
    },
    mounted() {
        axios.get(`seekers/resume/${this.$store.state.account}`,
        ).then(res => {
            this.Resume = res.data.data
        })
    },
    methods: {

        gotoResumeInfo(Id) {
            this.$store.commit('changeResumeId', Id)
            this.$router.push('ResumeInfo');

        },
        submitAddition() {
            this.$refs.form.validate((valid) => {
                if (valid) {

                    axios.post(`seekers/resume/insert`,
                        {
                            seekersAccount: this.$store.state.account,
                            expectionJob: this.form.expectionJob,
                            educationBackground: this.form.educationBackground,
                            project: this.form.project,
                            skills: this.form.skills,
                            selfEvaluation: this.form.selfEvaluation
                        }
                    ).then(res => {
                        axios.get(`seekers/resume/${this.$store.state.account}`,
                        ).then(res => {
                            this.Resume = res.data.data
                        })
                    }).catch(err => {
                        console.log(err);
                    })
                    console.log(this.form);
                    this.dialogFormVisible = false
                } else {
                    return false;
                }
            });
        },
        deleteResume(Id) {
            axios.delete(`/seekers/resume/${Id}`,
            ).then(res => {
                axios.get(`seekers/resume/${this.$store.state.account}`,
                ).then(res => {
                    this.Resume = res.data.data
                })
            })
        }
    }
}
</script>
<style scoped>
.add_resume {
    position: absolute;
    top: 150px;
    right: 20px;
}

.Resume-item {
    position: relative;
    width: 75%;
    height: 200px;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 200px;
    border-radius: 30px;
    cursor: pointer;
    transition: box-shadow 0.5s ease-in-out;
}

.Resume-item:hover {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.Resume-item:hover .ExpectedJob {
    color: rgb(0, 180, 179);
}

.FirstLine {
    position: relative;
    width: 75%;
    height: 200px;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 200px;
    border-radius: 30px;
}

#Title {
    left: 30px;
}

.ResumeID {
    position: absolute;
    top: 75px;
    left: 60px;
    font-weight: 700;
    font-size: 25px;
}



.ExpectedJob {
    position: absolute;
    top: 75px;
    left: 500px;
    font-weight: 700;
    font-size: 25px;
}

.delete_button {
    position: absolute;
    top: 10px;
    right: 50px;
}
</style>